<template>
  <div class="app-container" ref="appcontainer">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
      <el-form-item label="优惠劵名称"  prop="couponName">
        <el-input
          v-model="queryParams.couponName"
          placeholder="请输入优惠劵名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="类型" prop="couponType">
        <el-select v-model="queryParams.couponType" placeholder="请选择类型" clearable size="small">
          <el-option
            v-for="dict in couponTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="使用时间" prop="useTime">
        <el-date-picker clearable size="small"
                        v-model="queryParams.useTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择使用时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="获取类型" prop="receiveType">
        <el-select v-model="queryParams.receiveType" placeholder="请选择获取类型" clearable size="small">
          <el-option
            v-for="dict in receiveTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="兑换码" prop="cdkey">
        <el-input
          v-model="queryParams.cdkey"
          placeholder="请输入兑换码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary"   size="mini" @click="handleQuery">搜索</el-button>
        <el-button  size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['shopping:mallCouponsMember:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="couponCollection"
          v-hasPermi="['shopping:mallCouponsMember:remove']"
        >发放优惠券</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['shopping:mallCouponsMember:export']"
          v-if="false"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :height="tableHeight" :data="mallCouponsMemberList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" show-overflow-tooltip />
      <el-table-column label="主键" align="center" prop="id" v-if="false"/>
      <el-table-column label="领取人头像" align="center" prop="memberPhoto">
        <template width="120" slot-scope="scope">
          <img style="width:60px;height:60px;border:none;" :src="scope.row.memberPhoto">
        </template>
      </el-table-column>
      <el-table-column label="领取人昵称" align="center" prop="memberNickname" />
      <el-table-column label="优惠劵名称" align="center" prop="couponName" />
      <el-table-column label="优惠劵金额" align="center" prop="money" />
      <el-table-column label="满多少元可用" align="center" prop="minPrice" />
      <el-table-column label="优惠卷类型" align="center" prop="couponType">
        <template slot-scope="scope">
          <dict-tag :options="couponTypeOptions" :value="scope.row.couponType"/>
        </template>
      </el-table-column>

      <el-table-column label="使用时间" align="center" prop="useTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.useTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="可使用开始时间" align="center" prop="useStartTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.useStartTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="可使用结束时间" align="center" prop="useEndTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.useEndTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="获取类型" align="center" prop="receiveType">
      <template slot-scope="scope">
        <dict-tag :options="receiveTypeOptions" :value="scope.row.receiveType"/>
      </template>
    </el-table-column>

      <el-table-column label="兑换码" align="center" prop="cdkey" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['shopping:mallCouponsMember:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!--选择优惠卷弹窗-->
    <el-dialog :close-on-click-modal="false" title="选择优惠券" :visible.sync="openSelectCoupon " width="600px" append-to-body>
      <el-table ref="coupons" v-loading="loading" :height="tableHeight" :data="mallCouponsList">
        <el-table-column label="优惠劵名称" align="center" prop="couponName" />
        <el-table-column label="优惠券金额" align="center" prop="money" />
        <el-table-column label="优惠卷类型" align="center" prop="couponType">
          <template slot-scope="scope">
            <dict-tag :options="couponTypeOptions" :value="scope.row.couponType"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleSelect(scope.row)"
              v-hasPermi="['shopping:mallCoupons:edit']"
            >选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryCoupons.pageNum"
        :limit.sync="queryCoupons.pageSize"
        @pagination="selectCoupon"
      />
    </el-dialog>
    <!--查看客户信息弹窗-->
    <el-dialog title="客户信息" :visible.sync="couponsOpen" width="500px" append-to-body>
      <el-table v-loading="loading" :height="tableHeight" :data="memberList" >
        <el-table-column label="昵称" align="center" prop="nickName" />
        <el-table-column label="电话" align="center" prop="phone" />
        <el-table-column label="头像" align="center" prop="headImg">
          <template width="120" slot-scope="scope">
            <img style="width:60px;height:60px;border:none;" :src="scope.row.headImg">
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitLook">取 消</el-button>
      </div>
    </el-dialog>
    <!--发放优惠券弹窗-->
    <!--    zhang-->
    <el-dialog :close-on-click-modal="false" :title="CouponTitle" :visible.sync="openCoupon" width="600px" append-to-body>
      <el-form ref="formCoupon" :model="queryMenber" :rules="rules"  label-width="80px">
        <el-row>
          <el-col :span="16">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="queryMenber.phone"  placeholder="请输入手机号" maxlength="11"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button
              type="primary"
              style='position: absolute;right:10px;top:5px;'
              plain
              size=""
              @click="handleCheck"
            >查看</el-button>
          </el-col>
        </el-row>
      </el-form>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-col :span="5">
          <el-button
            type="primary"
            plain
            size=""
            @click="selectCoupon"
          >选择优惠券</el-button>
        </el-col>
        <el-col :span="19">
          <el-form-item label="优惠劵名称"  prop="couponName">
            <el-input v-model="this.couponNames" placeholder="请输入优惠劵名称" />
          </el-form-item>
        </el-col>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCoupon">确 定</el-button>
        <el-button @click="cancelCoupon">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listMallCouponsMember, getMallCouponsMember, logicDelMallCouponsMember, addMallCouponsMember, updateMallCouponsMember, exportMallCouponsMember } from "@/api/shopping/mallCouponsMember";
  import {  tempPhone } from "@/api/member/member";
  import { getCanGiftCoupons} from "@/api/shopping/mallCoupons";
  export default {
    name: "MallCouponsMember",
    data() {
      return {


        queryCoupons:{
          pageNum: 1,
          pageSize: 10,
          couponName:null,
          money:null,
          couponType:null,
          distinctionCdkCoupon:"coupon",

        },
        //选中的优惠券名称
        couponNames:"",
        //选择优惠券弹窗信息
        mallCouponsList:[],
        //根据手机号查询到的信息
        memberList:[],
        tableHeight:0,
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: false,
        // 总条数
        total: 0,
        // 优惠券领取表格数据
        mallCouponsMemberList: [],
        // 弹出层标题
        title: "",
        CouponTitle:"",
        //选择优惠券弹出层
        openSelectCoupon:false,
        // 是否显示弹出层
        open: false,
        //查看客户信息弹窗
        couponsOpen:false,
        //发放优惠券弹出层
        openCoupon:false,
        // 是否新人券字典
        newUserStateOptions: [],
        // 类型字典
        couponTypeOptions: [],
        // 是否一级分类字典
        isFirstClassifyOptions: [],
        // 使用状态字典
        useStateOptions: [],
        // 是否可用状态字典
        canUseStateOptions: [],
        // 获取类型字典
        receiveTypeOptions: [],
        //发放优惠券查询条件
        queryMenber:{
          phone:null,
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          couponId: null,
          memberId: null,
          memberPhoto: null,
          memberNickname: null,
          couponName: null,
          money: null,
          minPrice: null,
          newUserState: null,
          couponType: null,
          primaryKey: null,
          isFirstClassify: null,
          classifyId: null,
          useState: null,
          canUseState: null,
          useTime: null,
          useStartTime: null,
          useEndTime: null,
          receiveType: null,
          cdkey: null,
          giveUserId: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      this.getList();
      this.calHeight()
      this.getDicts("jy_coupon_type").then(response => {
        this.couponTypeOptions = response.data;
      });
      this.getDicts("sys_yes_no").then(response => {
        this.canUseStateOptions = response.data;
      });
      this.getDicts("sys_receive_type").then(response => {
        this.receiveTypeOptions = response.data;
      });
    },
    watch: {
      'showSearch':'calHeight'
    },
    methods: {
      //发放优惠券提交
      submitCoupon(){
        if (!this.couponNames){
          this.msgError("请先选择优惠券");
          return
        }
        addMallCouponsMember(this.form).then(response => {
          this.msgSuccess("发放成功");
          this.openCoupon = false;
          this.queryMenber.phone = null;
          this.couponNames = null;
          this.getList();
        });



      },
      //优惠券领取
      handleSelect(row){
        this.form.couponId = row.id
        this.couponNames =row.couponName;
        let getValue =  this.memberList;
        this.form.memberId = getValue.map(item => item.id).toString();
        this.openSelectCoupon = false ;
      },
      //选择优惠券按钮
      selectCoupon(){
        if (!this.queryMenber.phone){
          this.msgError("请先输入手机号");
          return
        }
        //查询对应的客户信息，获取领取人头像，昵称，手机号
        tempPhone(this.queryMenber).then(response => {
          this.memberList = response.data;
          if (this.memberList.length!=0 ){
            this.openSelectCoupon = true
          }
          if (this.memberList.length==0 ){
            this.msgError("手机号不正确");
          }
        });
          getCanGiftCoupons(this.queryCoupons).then(response => {
          this.mallCouponsList = response.rows;
            this.total = response.total;
        });
      },
      //客户信息弹窗种的确认按钮
      submitLook(){
        this.couponsOpen= false;
      },
      //根据手机号查询按钮
      handleCheck(){
        if (!this.queryMenber.phone){
          this.msgError("请先输入手机号");
          return
        }
        //根据手机号查询客户信息
        tempPhone(this.queryMenber).then(response => {
          this.memberList = response.data;
        });
        this.couponsOpen = true;
      },
      //发放优惠券按钮
      couponCollection(){
        this.openCoupon = true;
        this.CouponTitle = "发放优惠券"
      },
      calHeight () {
        this.$nextTick(() => {
          const rect = this.$refs.appcontainer.getBoundingClientRect();
          let height= this.$refs.queryForm.$el.offsetHeight;
          this.tableHeight = rect.height-height-120;
        })
      },
      /** 查询优惠券领取列表 */
      getList() {
        this.loading = true;
        listMallCouponsMember(this.queryParams).then(response => {
          this.mallCouponsMemberList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancelCoupon(){
        this.openCoupon = false;
        this.reset();
      },
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.queryMenber = {
          phone: null,
        },
        this.form = {
          id: null,
          couponId: null,
          memberId: null,
          memberPhoto: null,
          memberNickname: null,
          couponName: null,
          money: null,
          minPrice: null,
          newUserState: null,
          couponType: null,
          primaryKey: null,
          isFirstClassify: null,
          classifyId: null,
          useState: null,
          canUseState: null,
          useTime: null,
          useStartTime: null,
          useEndTime: null,
          receiveType: null,
          cdkey: null,
          giveUserId: null,
          delState: null,
          delUser: null,
          delType: null,
          delTime: null,
          createBy: null,
          createType: null,
          createTime: null,
          updateBy: null,
          updateType: null,
          updateTime: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.showSearch=false;
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加优惠券领取";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getMallCouponsMember(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改优惠券领取";
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return logicDelMallCouponsMember(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有优惠券领取数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportMallCouponsMember(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
      }
    }
  };
</script>
